const path = require('path')
const { merge } = require('webpack-merge')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ProgressWebpackPlugin = require('progress-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 处理svg文件
const miniSVGDataURI = require("mini-svg-data-uri");
// 自定义cleanWebpackPlugin插件
const ItsunCleanPlugin = require('./plugins/itsun-clean-plugin')
// webpackbundle进行分析
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin



const serve = require('./serve')
const build = require('./build')

// 常用的三种代码分离的方法：入口文件（使用entry配置）、防止重复（使用Entry dependencies或者SplitChunksPlugin去重和分离diam）、动态导入（模块的内联函数俩分离代码）
const config = {
  // 解析
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      '@': path.resolve(__dirname, '../src'),
      '@@': path.resolve(__dirname, '../public')
    },
  },
  entry: {
    app: path.resolve(__dirname, '../src/index.js'),
    // main: {
    //   import: path.resolve(__dirname, '../src/js/index.js'),
    //   filename: 'font/[name].js' //指定多文件的不同入口
    // },
    // main2: {
    //   import: './src/app3.js',
    //   dependOn: 'loash', //共同资源loadsh
    //   filename: 'chanel2/[name].js' //指定多文件的不同入口
    // },
    loash: {
      import: 'loadsh',
      filename: 'common/[name].js'
    }

  },
  output: {
    filename: 'js/app.[chunkhash].js',
    path: path.resolve(__dirname, '../dist'),
    clean: true,
    // 静态文件打包后的路径及文件名（默认是走全局的，如果有独立的设置就按照自己独立的设置来。）
    assetModuleFilename: "assets/[name]_[hash][ext]"
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    // 自定义cleanWebpackPlugin的插件
    new ItsunCleanPlugin(),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[chunkhash].css'
    }),
    new ProgressWebpackPlugin({
      activeMode: true
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html'),
      inject: 'body',
      title: '首页',
      favicon: path.resolve(__dirname, '../public/favicon.ico'),
      // 这里使用chunks分别引入不同的entry，指定实例加载不同的chunk
      // chunks: []
      // ,filename: ''
      // publicPath:是指定引入资源文件名前缀，比如：http://localhost/app.js
    }),
    // new HtmlWebpackPlugin({
    //   template: path.resolve(__dirname, '../public/index.html'),
    //   inject: 'body',
    //   title: '首页',
    //   favicon: path.resolve(__dirname, '../public/favicon.ico'),
    // 这里使用chunks分别引入不同的entry，指定实例加载不同的chunk
    // chunks: [

    // ]
    // ,filename: ''
    // publicPath:是指定目录文件，比如：http://localhost/app.js
    // }),
    // 多页面的chunk，再次new HtmlWebpackPlugin插件，并且配置
  ],
  module: {
    rules: [
      {
        test: /\.(css|s[ac]ss)$/i,
        use: [
          MiniCssExtractPlugin.loader,
          // 'postcss-loader',
          'css-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.(png|jpg|gif|gpeg)$/i,
        type: 'asset/resource',
        generator: {
          filename: "images/[name]_[hash][ext]", // 独立的配置
        },
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8kb （低于8kb都会压缩成 base64）
          }
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: "fonts/[name]_[hash][ext]",
        },
      },
      // svg 文件
      {
        test: /\.svg$/i,
        type: "asset",
        generator: {
          dataUrl(content) {
            content = content.toString();
            return miniSVGDataURI(content);
          },
        },
        parser: {
          dataUrlCondition: {
            maxSize: 2 * 1024 // 2kb （低于2kb都会压缩）
          }
        },

      },
      // 数据文件
      {
        test: /\.(txt|xml)$/i,
        type: "asset/source", // exports the source code of the asset
      },
      {
        test: /\.(js|ts|tsx|jsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: [
                '@babel/plugin-transform-runtime'
              ]
            }
          }
        ],
        include: /src/
      },
      {
        test: /\.vue$/,
        use: ['vue-loader'],
      },
      // 使用自定义loader
      {
        test: /\.md$/,
        use: [path.resolve(__dirname, 'loaders/md.js')],
        generator: {
          filename: "[name]_[hash][ext]", // 独立的配置
        },
      }
    ]
  }

}
module.exports = ({ development }) => merge(config, development ? serve : build)

